<!-- 市外安全评价检测机构信息详情展示 -->
<template>
    <div>
        <!-- 基本信息 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>机构基本信息</span>
                </div>
            </div>
            <div>
                <el-row>
                    <el-col :span="24">
                        <div class="first">
                            <span class="name">机构名称：</span>
                            <span v-if="editor">{{ safety.agentName }}</span>
                            <el-input v-if="!editor" v-model="safety.agentName" clearable />
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">资质证书编号：</span>
                            <span v-if="editor">{{ safety.qualifiCertifiId }}</span>
                            <el-input v-if="!editor" v-model="safety.qualifiCertifiId" clearable />
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <span class="name">资质有效期：</span>
                        <span v-if="editor">{{ safety.effectiveTime }}</span>
                        <el-date-picker v-if="!editor" v-model="safety.effectiveTime" type="date" format="yyyy 年 MM 月 dd 日"
                                        value-format="yyyy-MM-dd" placeholder="选择日期" clearable/>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">批准机关：</span>
                            <span v-if="editor">{{ safety.approvalDept }}</span>
                            <el-input v-if="!editor" v-model="safety.approvalDept" clearable />
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <span class="name">批准文号：</span>
                        <span v-if="editor">{{ safety.approvalCode }}</span>
                        <el-input v-if="!editor" v-model="safety.approvalCode" clearable />
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="first">
                            <span class="name">业务范围：</span>
                            <span v-if="editor"><el-input v-model="safety.businessScope" type="textarea" readonly /></span>
                            <el-input v-if="!editor" v-model="safety.businessScope" clearable />
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="first">
                            <span class="name">公司官网：</span>
                            <span v-if="editor">{{ safety.web }}</span>
                            <el-input v-if="!editor" v-model="safety.web" clearable />
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">技术负责人：</span>
                            <span v-if="editor">{{ safety.technicalDirector }}</span>
                            <el-input v-if="!editor" v-model="safety.technicalDirector" clearable />
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <span class="name">过程控制负责人：</span>
                        <span v-if="editor">{{ safety.processControl }}</span>
                        <el-input v-if="!editor" v-model="safety.processControl" clearable />
                    </el-col>
                </el-row>
            </div>
        </div>

        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>企业详情</span>
                </div>
            </div>
            <div>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">企业法人营业执照编号：</span>
                            <span v-if="editor">{{ safety.legalRepCode }}</span>
                            <el-input v-if="!editor" v-model="safety.legalRepCode" clearable />
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <span class="name">颁发日期：</span>
                        <span v-if="editor">{{ safety.issueTime }}</span>
                        <el-date-picker v-if="!editor" v-model="safety.issueTime" type="date" format="yyyy 年 MM 月 dd 日"
                                        value-format="yyyy-MM-dd" placeholder="选择日期" clearable/>
                    </el-col>
                    <el-col :span="7">
                        <span class="name">注册资金（万元）：</span>
                        <span v-if="editor">{{ safety.funding }}</span>
                        <el-input v-if="!editor" v-model="safety.funding" clearable />
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">颁发机关：</span>
                            <span v-if="editor">{{ safety.issueGov }}</span>
                            <el-input v-if="!editor" v-model="safety.issueGov" clearable />
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <span class="name">有效期：</span>
                        <span v-if="editor">{{ safety.legalRepEffectiveTime }}</span>
                        <el-date-picker v-if="!editor" v-model="safety.legalRepEffectiveTime" type="date" format="yyyy 年 MM 月 dd 日"
                                        value-format="yyyy-MM-dd" placeholder="选择日期" clearable/>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="first">
                            <span class="name">注册地址：</span>
                            <span v-if="editor">{{ safety.regAddress }}</span>
                            <el-input v-if="!editor" v-model="safety.regAddress" clearable />
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="first">
                            <span class="name">办公地址：</span>
                            <span v-if="editor">{{ safety.workAddress }}</span>
                            <el-input v-if="!editor" v-model="safety.workAddress" clearable />
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">公司监督电话：</span>
                            <span v-if="editor">{{ safety.companySuperTele }}</span>
                            <el-input v-if="!editor" v-model="safety.companySuperTele" clearable />
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <span class="name">传真：</span>
                        <span v-if="editor">{{ safety.companyFax }}</span>
                        <el-input v-if="!editor" v-model="safety.companyFax" clearable />
                    </el-col>
                    <el-col :span="7">
                        <span class="name">邮政编码：</span>
                        <span v-if="editor">{{ safety.companyZipCode }}</span>
                        <el-input v-if="!editor" v-model="safety.companyZipCode" clearable />
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">法定代表：</span>
                            <span v-if="editor">{{ safety.companyLegRep }}</span>
                            <el-input v-if="!editor" v-model="safety.companyLegRep" clearable />
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <span class="name">电话：</span>
                        <span v-if="editor">{{ safety.legRepTel }}</span>
                        <el-input v-if="!editor" v-model="safety.legRepTel" clearable />
                    </el-col>
                    <el-col :span="7">
                        <span class="name">移动电话：</span>
                        <span v-if="editor">{{ safety.legRepMobile }}</span>
                        <el-input v-if="!editor" v-model="safety.legRepMobile" clearable />
                    </el-col>
                </el-row>
            </div>
        </div>

        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>在渝办公信息</span>
                </div>
            </div>
            <div>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">机构负责人：</span>
                            <span v-if="editor">{{ safety.companyCharger }}</span>
                            <el-input v-if="!editor" v-model="safety.companyCharger" clearable />
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <span class="name">电话：</span>
                        <span v-if="editor">{{ safety.chargerTel }}</span>
                        <el-input v-if="!editor" v-model="safety.chargerTel" clearable />
                    </el-col>
                    <el-col :span="7">
                        <span class="name">移动电话：</span>
                        <span v-if="editor">{{ safety.chargerMobile }}</span>
                        <el-input v-if="!editor" v-model="safety.chargerMobile" clearable />
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="first">
                            <span class="name">在渝办公地址：</span>
                            <span v-if="editor">{{ safety.cqWorkAddress }}</span>
                            <el-input v-if="!editor" v-model="safety.cqWorkAddress" clearable />
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">在渝负责人：</span>
                            <span v-if="editor">{{ safety.cqCharger }}</span>
                            <el-input v-if="!editor" v-model="safety.cqCharger" clearable />
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <span class="name">电话：</span>
                        <span v-if="editor">{{ safety.cqChargerTel }}</span>
                        <el-input v-if="!editor" v-model="safety.cqChargerTel" clearable />
                    </el-col>
                    <el-col :span="7">
                        <span class="name">移动电话：</span>
                        <span v-if="editor">{{ safety.cqChargerMobile }}</span>
                        <el-input v-if="!editor" v-model="safety.cqChargerMobile" clearable />
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">登记日期：</span>
                            <span v-if="editor">{{ safety.registrationTime }}</span>
                            <el-date-picker v-if="!editor" v-model="safety.registrationTime" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择日期" clearable/>
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <span class="name">登记有效日期：</span>
                        <span v-if="editor">{{ safety.registrationEffectiveTime }}</span>
                        <el-date-picker v-if="!editor" v-model="safety.registrationEffectiveTime" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择日期" clearable />
                    </el-col>
                </el-row>
            </div>
        </div>
        <div style="margin-left: 580px;">
            <el-button v-if="editor" type="primary" @click="update">编 辑</el-button>
            <el-button v-if="!editor" type="warning" @click="save">保 存</el-button>
            <el-button v-if="!editor" plain type="primary" @click="cancel">取 消</el-button>
            <div style="margin-left: 10px; display: inline-block;">
                <router-link :to="{name: 'OutsideSafetyEvaluationOrganizationIndex'}">
                    <el-button v-if="editor" plain type="primary">返回</el-button>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import {Message} from 'element-ui'

export default {
    name: 'OutsideSafetyEvaluationOrganizationDetails',
    data() {
        return {
            safety: {},
            editor: true
        }
    },
    created() {
        this.safety = this.$route.query
    },
    methods: {
        change() {
            this.$forceUpdate()
        },
        update() {
            this.editor = false
        },
        cancel() {
            this.editor = true
        },
        save() {
            this.editor = true
            this.putRequest('/system/externalAgent/updateExternalTechService', this.safety).then(resp => {
                if (resp) {
                    Message.success('更新成功')
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.basic {
    margin: 20px;
    background: #fff;
}
.header {
    padding-top: 15px;
    padding-bottom: 15px;
}
.name {
    color: #888;
    font-size: 16px;
}
.title {
    margin-left: 20px;
    color: #337ab7;
}
.mt {
    border-collapse: collapse;
    margin-left: 20px;
}
.first {
    display: flex;
    margin-left: 40px;
    margin-bottom: 25px;
}
.updateProfGroup {
    width: 200px;
    margin-left: 8px;
}
.el-input {
    width: 250px;
}
</style>
